<template>
  <div class="h">
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#303133"
    text-color=" #fdf6ec"
    active-text-color="#E6A23C"
    @select="handleSelect"
  >
      <img src="./image/logo.png"  class="logo">
    <el-menu-item index="1">
      <router-link to="/">
      <a>推荐</a>
      </router-link>
      </el-menu-item>

   <el-menu-item index="2">
    <router-link to="/Sec">
    <a>
    热门歌单
    </a>
      </router-link>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>发现音乐</template>
     <el-menu-item index="2-1">排行榜</el-menu-item>
      <el-menu-item index="2-2">商城</el-menu-item>
      <el-menu-item index="2-3">关注</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>更多</template>
        <el-menu-item index="2-4-1">歌手</el-menu-item>
        <el-menu-item index="2-4-2">新碟上架</el-menu-item>
        <el-menu-item index="2-4-3">...</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="4">
      <a @click="$router.push('/We')"> 关于我们</a>
    </el-menu-item>
     <div class="demo-input-size">
    <el-input 
    v-model="searchKey" @keydown.enter="enterKey" 
      class="large"
      placeholder="音乐/歌手"
    />
    </div>
    <el-menu-item index="5">
    <a @click="$router.push('/Search')" >搜索</a>
  </el-menu-item>
  <el-menu-item index="6">
    <a @click="$router.push('/Login')" >登录</a>
  </el-menu-item>
  </el-menu>
  
  </div>
<router-view></router-view>
<FooterMusic v-show="$store.state.isFooterMusic"/>
</template>

<script>
import FooterMusic from"../src/components/item/Music.vue"
export default {

  components:{
    FooterMusic
  },
  
}
</script>
<style scoped>
.h{
  width: 100%;
}
.large{
  margin-top: 3%;
   width: 100%;
   height: 80%;
}
.logo{
  width: 4%;
  height: 60px;
}
.el-menu-item a{
text-decoration:none;
}
.el-menu-demo{
  display: flex;
  justify-content: space-around;
}
</style>


